<?php
$treeData = $this->treeData;
$allBlockClass = $this->allBlockClass;
?>

<div class="ad_title_ctn">
    <h2>Danh sách block</h2>
</div>
<div class="ad_content_ctn">

    <div class="bi_tree_ctn left">
        <div class="treeview_title">
            <a href="javascript:prepareToAdd()" class="k-button k-button-icontext ">Thêm mới</a>
            <a href="javascript:deleteBlock()" class="k-button k-button-icontext ">Xóa</a>
        </div>
        <div id="treeview"></div>
    </div>
    <div class="bi_tree_node_info left">
        <div class="update_ctn">
            <div class="node_info_title_update" >Cập nhật thông tin block</div>
            <div class="node_info_content_update" >
                <div class="block_editor_update"></div>
                <div class="block_editor_update_status"></div>
                <div class="block_control_ctn_update">
                    <a class="k-button k-button-icontext" href="javascript:updateWidget()">Lưu</a>
                    &nbsp;&nbsp;&nbsp;
                    <a class="k-button k-button-icontext" href="javascript:previewWidget()">Preview >></a>
                </div>
            </div>
        </div>
        <div class="add_ctn">
            <div class="node_info_title_add" >Thêm block</div>
            <div class="node_info_content_add" >
                <div class="block_class_chooser">
                    <span>Loại block:  </span>
                    <select id="cboBlockClass" placeholder="Chọn loại block">
                        <?php
                        foreach ($allBlockClass as $blockClassItem) {
                            echo '<option value="'.$blockClassItem->id.'">'.$blockClassItem->name.'</option>';
                        }
                        ?>
                    </select>
                </div>
                <div class="block_editor_add">

                </div>
                <div class="block_editor_add_status"></div>
                <div class="block_control_ctn_add">
                    <a class="k-button k-button-icontext" href="javascript:addWidget()">Lưu</a>
                    &nbsp;&nbsp;&nbsp;
                    <a class="k-button k-button-icontext" href="javascript:previewAddWidget()">Preview >></a>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        var treeDataAsJson = <?php echo $treeData ?>;

        $("#treeview").kendoTreeView({
            dataSource: treeDataAsJson,
            select: onSelect
        });

        var treeview = $("#treeview").data("kendoTreeView");
        function onSelect(e) {
            parent = treeview.parent(e.node);
            if(parent.length > 0){
                data = $('#treeview').data('kendoTreeView').dataItem(e.node);
                $.post('/admin/block/get-block-editor',{blockInstanceId:data.id }
                        ,function(result){
                            $('.block_editor_update').html(result);
                        });
            }


            $('.update_ctn').show();
            $('.add_ctn').hide();
        }

        $('#cboBlockClass').kendoComboBox({
            change:onBlockClassChange
        });
        function onBlockClassChange(){
            loadAddBlockForm();

        }



    })

    function prepareToAdd(){
        toggleUpdateAdd();
        loadAddBlockForm();
    }

    function deleteBlock(){
        treeview = $("#treeview").data("kendoTreeView");
        selectedBlock = treeview.select();
        parent = treeview.parent(selectedBlock);
        if(parent.length > 0){
            data = $('#treeview').data('kendoTreeView').dataItem(selectedBlock);

            $.post('/admin/block/delete-widget',{id:data.id}
                    ,function(result){
                        if (result.success){
                            $("#error_ctn").html('Xóa block thành công');
                            reloadTreeData(null,result.classId);
                            loadAddBlockForm();
                        }else{
                            $("#error_ctn").html(result.msg);
                        }

                    },'json');
        }else{
            alert("Không thể xóa nhóm block");
        }

    }

    function toggleUpdateAdd(){
        $('.update_ctn').toggle();
        $('.add_ctn').toggle();
    }


    function loadAddBlockForm(){
        blockClassId = $('#cboBlockClass').val();
        $.post('/admin/block/get-block-add-editor',{blockClassId:blockClassId }
                ,function(result){
                    $('.block_editor_add').html(result);
                });
        $(".block_editor_add_status").html('');

    }

    function addWidget(){
        paramAsJson = doAddWidget();
        $.post('/admin/block/add-widget',paramAsJson
                ,function(result){
                    if (result.success){
                        $(".block_editor_add_status").html('Lưu thông tin block thành công');
                        reloadTreeData(result.id);
                        loadAddBlockForm();
                    }else{
                        $(".block_editor_add_status").html(result.msg);
                    }

                },'json');
    }

    function updateWidget(){
        paramAsJson = doUpdateWidget();
        $.post('/admin/block/add-widget',paramAsJson
                ,function(result){
                    if (result.success){
                        $(".block_editor_add_status").html('Lưu thông tin block thành công');
                        reloadTreeData(result.id);
                    }else{
                        $(".block_editor_add_status").html(result.msg);
                    }

                },'json');
    }


    function previewWidget(){

        paramAsJson = doUpdateWidget();
        previewWindow = $("#previewWindow");
        previewWindow.kendoWindow({
            width: "900px",
            title: "Xem trước block"
        });

        $.post('/admin/block/preview-widget',paramAsJson
                ,function(result){
                    $('#preview_window_ctn').html(result);
                    previewWindow.data("kendoWindow").center().open();
                });

    }

    function previewAddWidget(){
        paramAsJson = doAddWidget();
        previewWindow = $("#previewWindow");
        previewWindow.kendoWindow({
            width: "900px",
            title: "Xem trước block"
        });
        $.post('/admin/block/preview-widget',paramAsJson
                ,function(result){
                    $('#preview_window_ctn').html(result);
                    previewWindow.data("kendoWindow").center().open();
                });



    }


    function reloadTreeData(widgetId, classId){
        $.post('/admin/block/reload-tree-data',{id:widgetId}
                ,function(result){
                    if (result.success){
                        treeview = $("#treeview").data("kendoTreeView");
                        treeview.setDataSource(result.data);
                        if(widgetId){
                            barDataItem = treeview.dataSource.get(widgetId);
                            treeview.expand(treeview.parent(treeview.findByUid(barDataItem.uid)));
                        }else{
                            barDataItem = treeview.dataSource.get(classId);
                            treeview.expand(treeview.findByUid(barDataItem.uid));
                        }


                    }else{
                        $(".block_editor_add_status").html(result.msg);
                    }

                },'json');
    }

</script>

<div id="previewWindow">
    <div id="preview_window_ctn"></div>
</div>